<template>
    <div class="sub-box-border body">
      <div>
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item to="/managermanagement/homeworkcollection">作业集</el-breadcrumb-item>
          <el-breadcrumb-item >作业集提交情况</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <el-divider></el-divider>
      <div>
        <div class="sub-margin sub-title">
          作业集名称:{{collection.collectionName}}
        </div>
        <div class="sub-margin sub-title">
          作业集介绍:{{collection.collectionIntroduction}}
        </div>
        <div class="sub-margin sub-title">
          作业集要求:{{collection.collectionRequest}}
        </div>
        <div class="sub-margin sub-title">
          提交时间:{{collection.collectionStartTime}} - {{collection.collectionEndTime}}
        </div>
      </div>
      <div style="width: 400px;">
        <el-row :gutter="10">
          <el-col :span="9">
            <el-input size="mini" v-model="table.queryText" placeholder="名称/备注"></el-input>
          </el-col>
          <el-col :span="3">
            <el-button size="mini" type="warning" @click="handleQuery">查询</el-button>
          </el-col>
        </el-row>
      </div>
      <div>
        <el-table
          :data="homeworkTable"
          style="width: 100%">
          <el-table-column
            type="index"
            width="50">
          </el-table-column>
          <el-table-column
            prop="userNickname"
            label="姓名"
            width="180">
          </el-table-column>
          <el-table-column
            prop="homeworkSubmitTime"
            label="提交时间"
            width="180">
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                size="mini"
                @click="handleEdit(scope.$index, scope.row)">查看</el-button>
              <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)">继续实验</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="table.currentPage"
          :page-sizes="[5, 10, 20, 40]"
          :page-size="table.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="table.total">
        </el-pagination>
      </div>
    </div>
</template>

<script>
    export default {
        name: "HomeWorkInformation",
        data(){
          return{
            table:{
              queryText: '',
              currentPage: 1,
              pageSize: 5,
              total: 0
            },
            collection:{},
            homeworkTable:[]
          }
        },
      methods:{
        handleEdit(index, row) {
          let data = this.$data;
          this.$router.push({
            name: "homeworkInformation",
            params: {
              collectionId: data.collection.collectionId,
              homeworkId: row.homeworkId
            }
          })
        },
        handleDelete(index, row) {
          console.log(index, row);
        },
        //分页
        handleQuery: function () {
          this.getTable();
        },
        handleSizeChange: function (size) {
          let data=this.$data;
          data.table.pageSize = size;
          this.getTable();
        },
        handleCurrentChange: function (currentPage) {
          let data=this.$data;
          data.table.currentPage = currentPage;
          this.getTable();
        },
        getTable(){
          //获得所有的列表信息
          let that = this;
          let data=this.$data;
          let qs = require("qs");
          data.loading = true;
          this.axios.post('/homework/showtablebycollectionid',qs.stringify({
            collectionId: data.collection.collectionId,
            queryText: data.table.queryText,
            pageSize: data.table.pageSize,
            currentPage: data.table.currentPage
          }))
            .then(response => {
              let resData = response.data;
              if(resData.errCode==200){
                data.homeworkTable = resData.data.listTable;
                data.table.total = resData.data.total;
              }else{
                that.$message({
                  type: "error",
                  message: resData.errMsg
                })
              }
              data.loading = false;
            });
        },
        getCollectionInformation:function(collectionId){
          let data = this.$data;
          let that = this;
          let qs = require("qs");
          this.axios.post("/collection/showcollection",qs.stringify({
            collectionId: collectionId
          }))
          .then(response => {
            let resData = response.data;
            if(resData.errCode == 200){
              data.collection = resData.data;
            }else{
              this.$message({
                type:"error",
                message: resData.errMsg
              });
            }
          })
        }
      },
      created:function () {
        let data = this.$data;
        data.collection.collectionId = this.$route.params.collectionId;
        this.getCollectionInformation(data.collection.collectionId);
        this.getTable(data.collection.collectionId);
      }
    }
</script>

<style scoped>
  .body{
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 10px;
  }

  .el-divider--horizontal{
    margin: 12px 0px;
  }
</style>
